<template>
<div>
   <div class="rightWin1" v-if="visible">
      <span class="title">{{label}}</span>
      <el-form :inline="true" class="demo-form-inline">
         <el-form-item label="审批动作">
              <el-select v-model="value" placeholder="请选择" @change="selectChange">
                  <el-option
                    v-for="item in options"
                    :key="item.key"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
              </el-select>
         </el-form-item>
      </el-form>
      <footer class="footer">
          <el-button type="primary" @click="submit">保存</el-button>
      </footer>
   </div>
 </div>
</template>

<script>

  export default {
    name: 'sequenceFlow',
    data() {
      return {
        options: [
        {
          key: '0',
          value: {xsiType: "tFormalExpression",value:"<![CDATA[${pass}]]>"},
          label: '同意'
        },
        {
          key: '1',
          value: {xsiType: "tFormalExpression",value:"<![CDATA[${!pass}]]>"},
          label: '不同意'
        }],
        value: '',
        visible: false,
        bool: true,
        node: {},
        label: '',
        candidateGroups: '',
        assignee: ''
      }
    },
    mounted() {

    },
    methods: {
      init(item) {
        this.node = item
        this.label = item.item.data.label
      },
      selectChange(value){
        console.log("sequence flow select value is ",value)
      },
      submit() {
        var node = this.$parent.getNodeById(this.node.item.id)
        console.log("sequenceflow data",this.value)
        let obj = this.options.find( i => {
            return i.value === this.value
          })
        console.log('obj is ',obj)
        node.appendLabel({
          attrs: {
            text: {
              text: obj.label,
            },
          },
        })
        node.setData(Object.assign({}, this.node.item.data, {conditionExpression: this.value}))
        this.visible = false
      }
    }
  }
</script>
<style scoped>
    section {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .rightWin1 {
        overflow-y: scroll;
    }

    .rightWin1 {
        background-color: white;
        position: absolute;
        top: 50px;
        right: 0;
        bottom: 0;
        padding: 0 12px;
        width: 300px;
    }
    .title {
      font-size: 20px;
      margin-top: 10px;
      margin-left: 10px;
    }
    .footer {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .demo-form-inline {
      margin-top: 25px;
      margin-left: 10px;
    }
</style>
